<script>
	var detailoption={
					sidePagination:"client",
					detailView: true,                   //是否显示父子表
					showExport: false,
					clickToSelect: true,// 单击行即可以选中
					singleSelect: true, //设置true禁止多选
					exportDataType: 'all',
					exportTypes: ['doc', 'excel'], //导出文件类型
					showToggle: true,  //是否显示视图切换按钮
					showRefresh: false,// 是否显示刷新按钮
					showColumns: true,//是否显示所有的列
					showPaginationSwitch: true,
					columns:[{
						field : "button",
						title : '<button class="Add btn btn-default" onclick="AddDetailTable($(this).val(),$(this).parent().parent().parent().parent().parent().attr('+"'id'"+'))">新增</button>',
						formatter : '<button class="Edit btn btn-default">修改</button><button class="Del btn btn-default">删除</button>',
						events:{"click .Edit": function (e, value, row, index) { EditDetailTable(row,$(this).attr("$el").attr("id"),index)},"click .Del": function (e, value, row, index) { DelDetailTable(row,$(this).attr("$el").attr("id"),index)}},
						visible: true,
						align: "center",
						valign: "middle"
						}, {
						field: "sysactionid",
						title: "权限编号",
						visible: false,
						align: "center",
						valign: "middle"
						}, {
						field: "sysactionname",
						title: "权限名",
						align: "center",
						valign: "middle"
						}, {
						field: "params",
						title: "参数",
						align: "center",
						valign: "middle"
						}, {
						field: "permissionorder",
						title: "权限级别",
						align: "center",
						valign: "middle"
						}, {
						field: "ifpermission",
						title: "允许",
						align: "center",
						valign: "middle"
						}, {
						field: "permissiontype",
						title: "权限类型",
						align: "center",
						valign: "middle"
						}, {
						field: "permissionid",
						title: "角色权限编号",
						visible: false,
						align: "center",
						valign: "middle"
						}, {
						field: "operatorid",
						title: "员工编号",
						align: "center",
						valign: "middle"
			}],
					onDblClickRow: function (row,$element) {
						if (actions.includes("139")) {
							EditDetailTable(row,$element.parent().parent().attr("id"),$element.data("index"));
						}
					},
					onExpandRow: function (index, row, $detail){
						var cur_table = $detail.html('<table class="table-striped"></table>').find('table');
						$(cur_table).bootstrapTable(detailoption);
						if (row.operpermissionjson!=null) { $(cur_table).bootstrapTable('load', row.operpermissionjson); }
					}
				};
	var tableoption={
			toolbar: '#toolbar',//工具按钮用哪个容器
			clickToSelect: true,// 单击行即可以选中
			singleSelect: true, //设置true禁止多选
			sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
            detailView: true,                   //是否显示父子表
			showExport: true,
			exportDataType: 'all',
			exportTypes: ['doc', 'excel'], //导出文件类型
			showToggle: true,  //是否显示视图切换按钮
			showRefresh: true,// 是否显示刷新按钮
			showColumns: true,//是否显示所有的列
			search: true, // 开启搜索功能
			pagination: true,// 开启分页功能
			sortName: "operatorid", // 设置默认排序为 name
			columns: [{
				field: "checked",
				checkbox: true
				}, {
				field: "isused",
				title: "使用",
				align: "center",
				formatter : function (value, row, index) { switch(value) {case 1 :return "是"; default : return "否"}},
				valign: "middle"
				} , {
				field: "operatorname",
				title: "员工姓名",
				align: "center",
				valign: "middle"
				}, {
				field: "operatorid",
				title: "员工编号",
				visible: false,
				align: "center",
				valign: "middle"
			}],
			onDblClickRow: function (row) {
				if (actions.includes("139")) {
					row.checked=true;
					EditTable(row);
				}
			},
			onExpandRow: function (index, row, $detail){
				var cur_table = $detail.html('<table class="table-striped"></table>').find('table');
				$(cur_table).bootstrapTable(detailoption);
				if (row.operpermissionjson!=null) { $(cur_table).bootstrapTable('load', row.operpermissionjson); }
				// cur_table.find("button.Add:first").val(row.operatorid);
				cur_table.find("button.Add").hide()
				cur_table.find("button.Edit").hide()
				cur_table.find("button.Del").hide()
				// if (!actions.includes("%var_detailaction1%")) { cur_table.find("Add").hide()};
				// if (!actions.includes("%var_detailaction2%")) { cur_table.find("Edit").hide()};
				// if (!actions.includes("%var_detailaction3%")) { cur_table.find("Del").hide()};
				// if (!(actions.includes("%var_detailaction1%")||actions.includes("%var_detailaction2%")||actions.includes("%var_detailaction3%"))) {cur_table.bootstrapTable("hideColumn","button")};
			}
		};
	$(function() {
		checkaction(new Array("138","139","141","142"));		
		$("#DetailTable").bootstrapTable(detailoption);
		$("#QueryTable").bootstrapTable(tableoption);
		$("#QueryTable").bootstrapTable('showLoading');
		ajaxarr([{
				url:"sysinfo/sysaction_query",
				data:{token:token,isused:1},
				title:"获取权限名信息失败！",
				func: function(data) {
					setting={view: {selectedMulti: false,showIcon: true },
						data: {	key: { name: "sysactionname"}, simpleData: {	enable: true,	idKey: "sysactionid",	pIdKey: "upid",	rootPId: 0}	},
						onDblClick: function(event, treeId, treeNode) {
							$("#detail_sysactionid").val(treeNode.sysactionname);
							$("#detail_sysactionid").data("value",treeNode.sysactionname);
							$("#sysactionidModal").modal("hide");
						}
					}
					$.fn.zTree.init($("#Tree_sysactionid"),setting , data.info.rows);	
					$("#sysactionidModal").on("hidden.bs.modal", function(e) { $("body").addClass("modal-open");  });
				}
		}]);
		ajaxarr([{
				url:"sysinfo/roleinfo_query",
				title:"获取角色信息失败，请刷新！",
				data:{token:token},
				func: function (data) {
					var roleinfo="<option value=''>请选择系统名称</option>";
					if (data.info.total>0) {
						for (i=0,j=data.info.rows.length;i<j;i++) { roleinfo+="<option value='"+ data.info.rows[i].roleinfoid + "'>"+data.info.rows[i].roleinfoname+"</option>";}
					}
					$("#Select_roleinfoid").html(roleinfo);
				$(".selectpicker").selectpicker("refresh");
				}
		}]);
		QueryTable();
		$(".selectpicker").selectpicker("refresh");
		$("#myModal").on("shown.bs.modal",function(e){ if ($("#txt_operatorid").attr("disabled")) { $("#txt_SaveModal").focus() } else {$("#txt_operatorid").focus()}; });
	});
	
	function AddTable() {//新增
		$("#txt_operatorid").val("");
		$("#txt_operatorid").attr("disabled",false);
		$("txt_operatorname").val("")
		$("#DetailTable").bootstrapTable('destroy').bootstrapTable(detailoption);
		if (actions.includes("%var_detailaction1%")) { $("#DetailTable").bootstrapTable("showColumn","button"); $("#DetailTable").find("Add").show()};
		if (actions.includes("%var_detailaction2%")) { $("#DetailTable").bootstrapTable("showColumn","button"); $("#DetailTable").find("Edit").show()};
		if (actions.includes("%var_detailaction3%")) { $("#DetailTable").bootstrapTable("showColumn","button"); $("#DetailTable").find("Del").show()};
        $("#myModalLabel").html("新增");
        $("#myModal").modal();
	};
	
	function EditTable(row) {
		if (row==null) {
			if ($("#QueryTable").bootstrapTable('getSelections').length == 0) {
				alert("请先选择要修改的数据!");
				return;
			};
			row=$("#QueryTable").bootstrapTable('getSelections')[0];
		}
		$('#txt_operatorid').val(row.operatorid);
		$("#txt_operatorid").attr("disabled",true);
		if (row.operatorname!=null) {$("#txt_operatorname").val(row.operatorname)} else {$("#txt_operatorname").val("")}
		if (row.operpermissionjson!=null) {$("#DetailTable").bootstrapTable('load', JSON.parse(JSON.stringify(row.operpermissionjson)));} else{$("#DetailTable").bootstrapTable('destroy').bootstrapTable(detailoption);}
        $("#DetailTable").find("button.Add:first").val(row.operatorid);
		$("#myModalLabel").html("修改");
        $("#myModal").modal();
	};
	
	function CommitTable() {
		var commitdata={
			operatorid:$("#txt_operatorid").val(),
			operatorname:$("#txt_operatorname").val(),
			token:token,
			operpermissionjson:JSON.stringify($("#DetailTable").bootstrapTable("getData")),
		};
		if ($("#myModalLabel").html()=="新增") {
			ajaxarr([{
				url:"sysinfo/operinfopermission_add",
				title:"新增数据失败！",
				data:commitdata,
				func:function(data) {
					alert("新增数据成功！id："+data.info.id);
					QueryTable(commitdata.operatorid);
					$("#myModal").modal("hide");
				}
			}]);
		} else {
			ajaxarr([{
				url:"sysinfo/operinfopermission_edit",
				title:"修改数据失败！",
				data:commitdata,
				func:function(data) {
					alert("修改数据成功！");
					QueryTable(commitdata.operatorid);
					$("#myModal").modal("hide");
				}
			}]);		
		};
	};
	
	function DelTable() {
		var row=$("#QueryTable").bootstrapTable('getSelections')[0];
		if (row==null) {
			alert("请先选择要显示/隐藏的数据!");
			return;
		}
		var info=(row.isused==0) ? "显示" : "隐藏" ;
		if(confirm( "您真的确定要"+info+"吗？") == true) {
			ajaxarr([{
				url: "sysinfo/operinfopermission_del",
				title: info + "数据失败！",
				data:{operatorid:row.operatorid,isused:(row.isused==0) ? 1 : null},
				func: function(data) {
					alert(info+"成功！");
                    QueryTable();
				}
			}]);
		}
	};
	
	function QueryTable(id) {
		$("#QueryTable").bootstrapTable('showLoading');
		ajaxarr([{
				url:"sysinfo/operinfopermission_query",
				title:"获取员工信息失败，请刷新！",
				data:{token:token},
				func: function (data) {
					if (data.info.total==0) { $("#QueryTable").bootstrapTable("destroy").bootstrapTable(tableoption); } 
					else {	
						$("#QueryTable").bootstrapTable('load', data.info.rows); 
						if (id) {
							for (var i=data.info.total;i>0;i--) {
								if (data.info.rows[i-1].operatorid==id) {
									$("#QueryTable").bootstrapTable('selectPage', Math.ceil(i/$("#QueryTable").bootstrapTable('getOptions').pageSize));
									i=i%$("#QueryTable").bootstrapTable('getOptions').pageSize-1;	
									$("#QueryTable").bootstrapTable('expandRow', (i>=0) ? i : i + $("#QueryTable").bootstrapTable('getOptions').pageSize);
									break;
								};							
							}
						}
					};
					$("#QueryTable").bootstrapTable('hideLoading');
				}
		}]);		
	};
	
	function AddDetailTable(data,id) {
		$("#detail_sysactionid").val("");$("#detail_sysactionid").data("value","");
		$("#detail_sysactionid").selectpicker("val","");
		$("#detail_params").val("");
		$("#detail_permissionorder").val("");
		$("#detail_ifpermission").val("");
		$("#detail_permissiontype").val("1");
		$("#detail_permissionid").val("");
		$("#detail_permissionid").attr("disabled",false);
		$("#detail_roleinfoid").val("");
		if (id=="DetailTable") { $("#SaveDetailModal").text("确定") } else { $("#SaveDetailModal").text("保存") };
        $("#myDetailModalLabel").html("新增");
        $("#myDetailModal").modal();
	}

	function EditDetailTable(row,id,index) {
		if (row==null) {
			if ($("#QueryTable").bootstrapTable('getSelections').length == 0) {
				alert("请先选择要修改的数据!");
				return;
			};
			var row=$("#QueryTable").bootstrapTable('getSelections')[0];
		}
		if (row.sysactionid!=null) { $("#detail_sysactionid").selectpicker("val",row.sysactionid) } else { $("#detail_sysactionid").selectpicker("val","")};
		if (row.params!=null) { $("#detail_params").val(row.params) } else { $("#detail_params").val("")};
		if (row.permissionorder!=null) { $("#detail_permissionorder").val(row.permissionorder) } else { $("#detail_permissionorder").val("")};
		if (row.ifpermission!=null) { $("#detail_ifpermission").val(row.ifpermission) } else { $("#detail_ifpermission").val("")};
		if (row.permissiontype=="2") { 
			$("#detail_permissiontype").selectpicker("val","2");$("#Tree_sysaction").hide();$("#Select_roleinfo").show(); 
			if (row.sysactionid!=null) {
				// if (row.upid!=0) {
					expendp($.fn.zTree.getZTreeObj("Tree_sysactionid"),$.fn.zTree.getZTreeObj("Tree_sysactionid").getNodeByParam("sysactionid",row.sysactionid));
					$.fn.zTree.getZTreeObj("Tree_sysactionid").selectNode($.fn.zTree.getZTreeObj("Tree_sysactionid").getNodeByParam("sysactionid",row.sysactionid),true);
				// };
				$("#detail_sysactionid").val(row.sysactionname);
				$("#detail_sysactionid").data("value",row.sysactionid);
			} else {
				$("#detail_sysactionid").val("");
				$("#detail_sysactionid").data("value","");
			};
		} else { 
			$("#detail_permissiontype").selectpicker("val","1");$("#Tree_sysaction").show();$("#Select_roleinfo").hide();
			if (row.sysactionid!=null) {
				$("#detail_sysactionid").val(row.sysactionname);
				$("#detail_sysactionid").data("value",row.sysactionid);
			} else {
				$("#detail_sysactionid").val("");
				$("#detail_sysactionid").data("value","");
			};
		};
		if (row.permissionid!=null) { $("#detail_permissionid").val(row.permissionid) } else { $("#detail_permissionid").val("")};
		$("#detail_permissionid").attr("disabled",true);
		if (row.roleinfoid!=null) { $("#detail_roleinfoid").val(row.roleinfoid) } else { $("#detail_roleinfoid").val("")};
		if (id=="DetailTable") { $("#SaveDetailModal").text("确定") } else { $("#SaveDetailModal").text("保存") };
		$("#SaveDetailModal").val(index);
        $("#myDetailModalLabel").html("修改");
        $("#myDetailModal").modal();
	}

	function CommitDetailTable(index) {
		var commitdata={
			sysactionid:($("#detail_sysactionid").data("value")=="") ? null : $("#detail_sysactionid").data("value"),
			sysactionname:($("#detail_sysactionid").val()=="") ? null : $("#detail_sysactionid").val(),
			params:($("#detail_params").val()=="") ? null : $("#detail_params").val(),
			permissionorder:($("#detail_permissionorder").val()=="") ? null : $("#detail_permissionorder").val(),
			ifpermission:($("#detail_ifpermission").val()=="") ? null : $("#detail_ifpermission").val(),
			permissiontype:($("#detail_permissiontype").val()!="2") ? "1" : "2",
			permissionid:($("#detail_permissionid").val()=="") ? null : $("#detail_permissionid").val(),
			roleinfoid:($("#detail_roleinfoid").val()=="") ? null : $("#detail_roleinfoid").val(),
			token:token,
		};
		if ($("#myDetailModalLabel").html()=="新增") {
			$("#DetailTable").bootstrapTable("load",$("#DetailTable").bootstrapTable("getData").push(commitdata));
		} else {
			var data=$("#DetailTable").bootstrapTable("getData");
			console.log(data);console.log(index);data.splice(index,1,commitdata);console.log(data);
			if (data!=null) { $("#DetailTable").bootstrapTable("load",data) } else { $("#DetailTable").bootstrapTable('destroy').bootstrapTable(detailoption) };
		};
		$('#myDetailModal').modal('hide');
	};
	
</script>
<table id="QueryTable" class='table-striped'></table>
<div id="toolbar" class="btn-group">
	<button id="138" type="button" style="display:none;" class="btn btn-default" onclick="AddTable()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增</button>
	<button id="139" type="button" style="display:none;" class="btn btn-default" onclick="EditTable()"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button>
	<button id="141" type="button" style="display:none;" class="btn btn-default" onclick="DelTable()"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>显示/隐藏</button>
	<button id="142" type="button" style="display:none;" class="btn btn-default" onclick="QueryTable()"><span class="glyphicon glyphico-query" aria-hidden="true"></span>查询</button>
</div>
<div class="modal fade" id="myModal" tabindex="-1" >
	<div class="modal-dialog" >
		<div class="modal-content" >
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel"></h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			</div>
			<div class="modal-body form-inline">
				<label for="txt_operatorid" class="col-lg-3 text-center">员工ID</label><input id="txt_operatorid" class="form-control col-lg-3" onkeypress="{ if (event.keyCode==13) {txt_operatorid.focus()}}" type="text" placeholder="员工ID"/>
				<label for="txt_operatorname" class="col-lg-3 text-center">员工姓名</label><input id="txt_operatorname" class="form-control col-lg-3" onkeypress="{ if (event.keyCode==13) {txt_operatorid.focus()}}" type="text" placeholder="员工姓名"/>
			</div>
			<table id="DetailTable" class="table-striped"></table>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" id="SaveModal" onclick="CommitTable()"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
				<button type="button" class="btn btn-default" data-dismiss="modal" ><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="myDetailModal" tabindex="-1" >
	<div class="modal-dialog" >
		<div class="modal-content" >
			<div class="modal-header">
				<h4 class="modal-title" id="myDetailModalLabel"></h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			</div>
			<div class="modal-body form-inline">
				<label for="detail_sysactionid" class="col-lg-3 text-center">权限名</label><input id="detail_sysactionid" class="form-control col-lg-3" onkeypress="{ if (event.keyCode==13) {detail_params.focus()}}" data-target="#sysactionidModal" data-toggle="modal" type="text" placeholder="权限编号"/>
				<label for="detail_params" class="col-lg-3 text-center">参数</label><input id="detail_params" class="form-control col-lg-3" onkeypress="{ if (event.keyCode==13) {detail_permissionorder.focus()}}" type="text" placeholder="参数"/>
				<label for="detail_permissionorder" class="col-lg-3 text-center">权限级别</label><input id="detail_permissionorder" class="form-control col-lg-3" onkeypress="{ if (event.keyCode==13) {detail_ifpermission.focus()}}" type="text" placeholder="权限级别"/>
				<label for="detail_ifpermission" class="col-lg-3 text-center">允许</label><input id="detail_ifpermission" class="form-control col-lg-3" onkeypress="{ if (event.keyCode==13) {detail_permissiontype.focus()}}" type="text" placeholder="允许"/>
				<label for="detail_permissiontype" class="col-lg-3 text-center">权限类型</label><select id="detail_permissiontype" class="selectpicker form-control col-lg-3" onkeypress="{ if (event.keyCode==13) {detail_permissionid.focus()}}" title="权限类型" onchange="{if ($('#detail_permissiontype').val()=='2') {$('#Select_roleinfo').show();$('#Tree_sysaction').hide();} else {$('#Select_roleinfo').hide();$('#Tree_sysaction').show();}}"><option value='1'>权限</option><option value='2'>角色</option></select>
				<label for="detail_permissionid" class="col-lg-3 text-center">角色权限编号</label><input id="detail_permissionid" class="form-control col-lg-3" onkeypress="{ if (event.keyCode==13) {detail_roleinfoid.focus()}}" type="text" placeholder="角色权限编号"/>
				<label for="detail_roleinfoid" class="col-lg-3 text-center">角色编号</label><input id="detail_roleinfoid" class="form-control col-lg-3" onkeypress="{ if (event.keyCode==13) {SaveDetailModal.focus()}}" type="text" placeholder="角色编号"/>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" id="SaveDetailModal" onclick="CommitDetailTable($(this).val())"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
				<button type="button" class="btn btn-default" data-dismiss="modal" ><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="sysactionidModal" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header" >
				<h4 class="modal-title" >选择权限编号</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			</div>
			<div class="modal-body">
				<div id="Tree_sysaction"><ul id="Tree_sysactionid" class="ztree" ></ul></div>
				<div id="Select_roleinfo"><select id="Select_roleinfoid" class="selectpicker" title="请选择角色"></select></div>
			</div>
			<div class="modal-footer" >
				<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="{if ($('#Select_roleinfo').css('display')=='none') {console.log($.fn.zTree.getZTreeObj('Tree_sysactionid').getSelectedNodes()[0].sysactionname);$('#detail_sysactionid').val($.fn.zTree.getZTreeObj('Tree_sysactionid').getSelectedNodes()[0].sysactionname);$('#detail_sysactionid').data('value',$.fn.zTree.getZTreeObj('Tree_sysactionid').getSelectedNodes()[0].sysactionid);} else {$('#detail_sysactionid').val($('#Select_roleinfoid option:selected').text());$('#detail_sysactionid').data('value',$('#Select_roleinfoid').val());}}">确认</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>